<template>
    <div class="Aside">
        <img src="../../assets/img/asider_img/logo.png" alt="" class="logo">
        <el-row class="tac">
            <el-col :span="24">
                <el-menu
                        :default-active="defaultActive"
                        router
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @select="handleSelect"
                        @close="handleClose">
                    <el-menu-item index="Registration">
                        <div>
                            <i class="el-icon-user-solid"></i>
                            <span slot="title" >注册登记</span>
                        </div>
                        <div>
                            <i class=" el-icon-caret-right"></i>
                        </div>
                    </el-menu-item>

                    <el-menu-item index="certificate">
                        <div>
                            <i class="el-icon-notebook-1"></i>
                            <span slot="title" >书证管理</span>
                        </div>
                        <div>
                            <i class=" el-icon-caret-right"></i>
                        </div>
                    </el-menu-item>

                    <el-menu-item index="Equipment" disabled>
                        <div>
                            <i class="el-icon-setting"></i>
                            <span slot="title" >设备管理</span>
                        </div>
                        <div>
                            <i class=" el-icon-caret-right"></i>
                        </div>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>

    </div>
</template>

<script>

    export default {
        name: "index",
        data(){
            return{
                defaultActive:'Registration'
            }
        },
        mounted(){
            this.setCurrentRoute()
        },
        methods: {
            setCurrentRoute () {
                this.defaultActive = this.$route.name //关键   通过他就可以监听到当前路由状态并激活当前菜单
            },
            handleSelect(key) {

                if(key==1){
                       this.$router.push({
                           name:'Registration'
                       })
                }
                if(key==2){
                    this.$router.push({
                        name:'certificate'
                    })
                }
                if(key==3){
                    this.$router.push({
                        name:'Equipment'
                    })
                }
                // console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    }
</script>

<style scoped lang="less">
    .Aside{
        display: flex;
        flex-direction: column;
        .logo{
            align-self: center;
            margin-top: 20px;
            margin-bottom: 40px;
            width: 155px;
            height: 31px;
        }
        /deep/.el-menu-item{
            display: flex;
            justify-content: space-between;
        }
    }
</style>
